<script setup>
import { ref, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 模拟用户数据
const users = ref([
  { id: 1, name: '张三', email: 'zhangsan@example.com', phone: '13800138001', status: 1, createTime: '2023-01-15' },
  { id: 2, name: '李四', email: 'lisi@example.com', phone: '13800138002', status: 0, createTime: '2023-02-20' },
  { id: 3, name: '王五', email: 'wangwu@example.com', phone: '13800138003', status: 1, createTime: '2023-03-10' },
  { id: 4, name: '赵六', email: 'zhaoliu@example.com', phone: '13800138004', status: 1, createTime: '2023-04-05' },
  { id: 5, name: '钱七', email: 'qianqi@example.com', phone: '13800138005', status: 0, createTime: '2023-05-12' }
])

// 搜索条件
const searchForm = ref({
  name: '',
  email: '',
  status: ''
})

// 分页数据
const pagination = ref({
  currentPage: 1,
  pageSize: 10,
  total: 5
})

// 用户表单数据
const userForm = ref({
  id: null,
  name: '',
  email: '',
  phone: '',
  status: 1
})

// 控制对话框显示
const dialogVisible = ref(false)
const dialogTitle = ref('')

// 状态选项
const statusOptions = [
  { label: '启用', value: 1 },
  { label: '禁用', value: 0 }
]

// 选中的行
const selectedRows = ref([])

// 计算属性：是否选中了行
const hasSelected = computed(() => selectedRows.value.length > 0)

// 计算属性：是否只选中了一行
const isSingleSelected = computed(() => selectedRows.value.length === 1)

// 搜索功能
const handleSearch = () => {
  ElMessage.success('搜索功能已触发')
}

// 重置搜索
const handleReset = () => {
  searchForm.value = {
    name: '',
    email: '',
    status: ''
  }
  ElMessage.info('搜索条件已重置')
}

// 新增用户
const handleAdd = () => {
  dialogTitle.value = '新增用户'
  userForm.value = {
    id: null,
    name: '',
    email: '',
    phone: '',
    status: 1
  }
  dialogVisible.value = true
}

// 编辑用户
const handleEdit = (row) => {
  dialogTitle.value = '编辑用户'
  userForm.value = { ...row }
  dialogVisible.value = true
}

// 删除用户
const handleDelete = (row) => {
  ElMessageBox.confirm(
    `确定要删除用户 "${row.name}" 吗？`,
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 模拟删除操作
    const index = users.value.findIndex(user => user.id === row.id)
    if (index !== -1) {
      users.value.splice(index, 1)
      ElMessage.success('删除成功')
    }
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

// 批量删除
const handleBatchDelete = () => {
  ElMessageBox.confirm(
    '确定要删除选中的用户吗？',
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 模拟批量删除操作
    const ids = selectedRows.value.map(row => row.id)
    users.value = users.value.filter(user => !ids.includes(user.id))
    selectedRows.value = []
    ElMessage.success('删除成功')
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

// 导入功能
const handleImport = () => {
  ElMessage.success('导入功能已触发')
}

// 导出功能
const handleExport = () => {
  ElMessage.success('导出功能已触发')
}

// 提交表单
const submitForm = () => {
  if (userForm.value.id) {
    // 编辑操作
    const index = users.value.findIndex(user => user.id === userForm.value.id)
    if (index !== -1) {
      users.value[index] = { ...userForm.value }
      ElMessage.success('编辑成功')
    }
  } else {
    // 新增操作
    const newUser = {
      ...userForm.value,
      id: Date.now(), // 模拟生成ID
      createTime: new Date().toLocaleDateString()
    }
    users.value.push(newUser)
    ElMessage.success('新增成功')
  }
  dialogVisible.value = false
}

// 页面加载时
onMounted(() => {
  // 模拟从后端获取数据
  console.log('用户管理页面已加载')
})
</script>

<template>
  <!-- 导航栏 -->
  <div class="navigation-bar">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
  </div>

  <!-- 搜索栏 -->
  <div class="search-bar">
    <el-card>
      <el-form :model="searchForm" label-width="80px" inline>
        <el-form-item label="用户名称">
          <el-input v-model="searchForm.name" placeholder="请输入用户名称" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="searchForm.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>

  <!-- 工具栏 -->
  <div class="toolbar">
    <el-card>
      <el-button type="primary" @click="handleAdd">新增</el-button>
      <el-button type="primary" :disabled="!isSingleSelected" @click="handleEdit(selectedRows[0])">编辑</el-button>
      <el-button type="danger" :disabled="!hasSelected" @click="handleBatchDelete">删除</el-button>
      <el-button @click="handleImport">导入</el-button>
      <el-button @click="handleExport">导出</el-button>
    </el-card>
  </div>

  <!-- 用户列表 -->
  <div class="user-list">
    <el-card>
      <el-table :data="users" style="width: 100%" border @selection-change="selectedRows = $event">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="用户ID" width="80" />
        <el-table-column prop="name" label="用户名称" width="120" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="phone" label="手机号" width="120" />
        <el-table-column prop="status" label="状态" width="80">
          <template #default="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
              {{ scope.row.status === 1 ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="120" />
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>

  <!-- 分页栏 -->
  <div class="pagination-bar">
    <el-pagination
      v-model:current-page="pagination.currentPage"
      v-model:page-size="pagination.pageSize"
      :page-sizes="[10, 20, 50, 100]"
      :total="pagination.total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="pagination.pageSize = $event"
      @current-change="pagination.currentPage = $event"
    />
  </div>

  <!-- 用户编辑/新增对话框 -->
  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px">
    <el-form :model="userForm" label-width="80px">
      <el-form-item label="用户名称" prop="name">
        <el-input v-model="userForm.name" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="userForm.email" />
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="userForm.phone" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="userForm.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.navigation-bar {
  margin-bottom: 20px;
}

.search-bar {
  margin-bottom: 20px;
}

.toolbar {
  margin-bottom: 20px;
}

.toolbar .el-button {
  margin-right: 10px;
}

.user-list {
  margin-bottom: 20px;
}

.pagination-bar {
  display: flex;
  justify-content: flex-end;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>